<markdown>
# 指定容器

通过 `container` 指定容器
</markdown>

<template>
  <x-space>
    <div ref="scrollEl" class="w300px h400px p20px of-auto" style="border: 1px solid gray">
      <h2 id="anchor-1">锚点 1</h2>
      <p v-for="(i) in 5" :key="i" class="h50px">空格</p>
      <h2 id="anchor-2">锚点 2</h2>
      <p v-for="(i) in 5" :key="i" class="h50px">空格</p>
      <h2 id="anchor-3">锚点 3</h2>
      <p v-for="(i) in 5" :key="i" class="h50px">空格</p>
      <h2 id="anchor-4">锚点 4</h2>
      <p v-for="(i) in 5" :key="i" class="h50px">空格</p>
      <h2 id="anchor-5">锚点 5</h2>
      <p v-for="(i) in 5" :key="i" class="h50px">空格</p>
      <h2 id="anchor-6">锚点 6</h2>
      <p v-for="(i) in 5" :key="i" class="h50px">空格</p>
      <h2 id="anchor-7">锚点 7</h2>
      <p v-for="(i) in 5" :key="i" class="h50px">空格</p>
    </div>
    <x-anchor class="w150px" :container="scrollEl">
      <x-anchor-link href="#anchor-1" title="锚点1" />
      <x-anchor-link href="#anchor-2" title="锚点2" />
      <x-anchor-link href="#anchor-3" title="锚点3" />
      <x-anchor-link href="#anchor-4" title="锚点4" />
      <x-anchor-link href="#anchor-5" title="锚点5" />
      <x-anchor-link href="#anchor-6" title="锚点6" />
      <x-anchor-link href="#anchor-7" title="锚点7" />
    </x-anchor>
  </x-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const scrollEl = ref<HTMLElement>()
</script>